<template>
  <ul class="keyboard">
    <li
      v-for="(key,index) in keyList"
      :key="index"
      track-by="$index"
      :class="{delete: key === 'Delete', tab: key === 'Tab', capslock: key === 'Caps', enter: key === 'Enter', shift: key === 'Shift', space: key === 'Space', shifted: (key === 'Shift') && hasShifted, capsed: (key === 'Caps') && hasCapsed }"
      v-text="key"
      @click="clickKey(key)"
    ></li>
  </ul>
</template>


<script>
export default {
  name: "KeyBoard",
  props: {
    keyboardtext: {
      type: [String, Number],
      default: ''
    } // key code
  },
  data() {
    return {
      keyList: [],
      normalKeyList: [],
      shiftedKeyList: [],
      capsedKeyList: [],
      hasShifted: false,
      hasCapsed: false,
      keyvalue: this.keyboardtext
    };
  },
  created() {
    this.ready();
  },
  methods: {
    // 点击软键盘按钮触发回调
    clickKey(key) {
      switch (key) {
        case "Delete":
          let kbt = this.keyvalue;
          this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
          break;

        case "Tab":
          this.keyvalue += "\t";
          break;

        case "Enter":
          this.keyvalue += "\n";
          break;

        case "Space":
          this.keyvalue += " ";
          break;

        case "Caps":
          this.hasCapsed = !this.hasCapsed;
          this.keyList = this.hasCapsed
            ? this.capsedKeyList
            : this.normalKeyList;
          break;

        case "Shift":
          this.hasShifted = !this.hasShifted;
          this.keyList = this.hasShifted
            ? this.shiftedKeyList
            : this.normalKeyList;
          break;

        default:
          this.keyvalue += key;
          break;
      }
      console.log(this.keyboardtext);
      console.log(this.keyvalue);
      this.$emit("updatekey", this.keyvalue);
    },
    // 载入软键盘数据
    ready() {
      let normalKeyList = [
          "`",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "-",
          "=",
          "Delete",
          "Tab",
          "q",
          "w",
          "e",
          "r",
          "t",
          "y",
          "u",
          "i",
          "o",
          "p",
          "[",
          "]",
          "\\",
          "Caps",
          "a",
          "s",
          "d",
          "f",
          "g",
          "h",
          "j",
          "k",
          "l",
          ";",
          "'",
          "Enter",
          "Shift",
          "z",
          "x",
          "c",
          "v",
          "b",
          "n",
          "m",
          ",",
          ".",
          "/",
          "Shift",
          "Space"
        ],
        shiftedKeyList = [
          "~",
          "!",
          "@",
          "#",
          "$",
          "%",
          "^",
          "&",
          "*",
          "(",
          ")",
          "_",
          "+",
          "Delete",
          "Tab",
          "Q",
          "W",
          "E",
          "R",
          "T",
          "Y",
          "U",
          "I",
          "O",
          "P",
          "{",
          "}",
          "|",
          "Caps",
          "A",
          "S",
          "D",
          "F",
          "G",
          "H",
          "J",
          "K",
          "L",
          ":",
          '"',
          "Enter",
          "Shift",
          "Z",
          "X",
          "C",
          "V",
          "B",
          "N",
          "M",
          "<",
          ">",
          "?",
          "Shift",
          "Space"
        ],
        capsedKeyList = [
          "`",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "-",
          "=",
          "Delete",
          "Tab",
          "Q",
          "W",
          "E",
          "R",
          "T",
          "Y",
          "U",
          "I",
          "O",
          "P",
          "[",
          "]",
          "\\",
          "Caps",
          "A",
          "S",
          "D",
          "F",
          "G",
          "H",
          "J",
          "K",
          "L",
          ";",
          "'",
          "Enter",
          "Shift",
          "Z",
          "X",
          "C",
          "V",
          "B",
          "N",
          "M",
          ",",
          ".",
          "/",
          "Shift",
          "Space"
        ];

      this.keyList = this.normalKeyList = normalKeyList;
      this.shiftedKeyList = shiftedKeyList;
      this.capsedKeyList = capsedKeyList;
    }
  }
};
</script>


<style lang="scss" scoped>
.keyboard {
  width: 688px;
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  li {
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    &:hover {
      position: relative;
      border-color: gray;
      cursor: pointer;
    }
    &:active {
      top: 1px;
      left: 1px;
    }
  }
  .tab,
  .delete {
    width: 70px;
  }
  .capslock {
    width: 80px;
  }
  .enter {
    width: 77px;
  }
  .shift {
    width: 102px;
  }
  .space {
    clear: left;
    width: 681px;
  }
  .shifted {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
  }
  .capsed {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
  }
}
</style>
